<template>
  <c-select
    v-bind="$attrs"
    filterable
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    :value="value"
    :options="options"
    :props="props"
    @change="hangleChange"
  ></c-select>
</template>

<script>
import { mapGetters } from 'vuex'
import { getParams } from '@/credit/views/province/goods/goodsMixins'

export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    selectParams: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      loading: false,
      props: {
        value: 'industrial_package_id',
        label: 'load_name',
      },
      params: {
        // 'shelves_status.eq': 1 // 上架
      },
      tableName: 'industrial_package_agency_view_pc',
      options: [],
      select: {
        gua_type: '',
        project_type_name: '',
      },
    }
  },
  computed: {
    ...mapGetters(['user', 'org', 'clientId']),
  },
  watch: {
    projectType() {
      this.getData()
    },
  },
  created() {
    this.params = {
      ...this.params,
      ...getParams(this.user, this.org),
    }

    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            'agency_id.eq': this.clientId,
            'is_guarantee.eq': '0', // 非保函产品
            ...this.selectParams,
            groupFields: 'industrial_package_id',
          },
          { load_name: 'asc' }
        )
        .then(res => {
          this.options = (res && res.data) || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    hangleChange(val) {
      this.select = this.options.find(item => item.industrial_package_id === val) || {}
      this.$emit('change', val, { ...this.select })
    },
  },
}
</script>
<style lang="scss" scoped></style>
